<!--  -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-table border stripe style="width: 100%" :data="rightsList" v-loading="getLoading" >
        <el-table-column type="index" label="#" align="center"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限等级" prop="level">
          <template v-slot="{row}">
            <el-tag :type="tagType[row.level]">{{tagText[row.level]}}</el-tag>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      getLoading: false,
      rightsList: [],
      tagType: { 0: '', 1: 'success', 2: 'warning' },
      tagText: { 0: '一级', 1: '二级', 2: '三级' }
    }
  },

  created () { // 进入页面就开始执行
    this.getRightsList()
  },

  components: {// 组件
  },

  computed: { // 计算属性是属性调用，而methods是函数调用

  },

  methods: { // 存储方法，处理复杂逻辑}
    getRightsList () {
      this.getLoading = true
      this.$http.get('rights/' + 'list').then(res => {
        res = res.data
        if (res.meta.status !== 200) {
          return this.$message.error('获取权限列表失败！')
        }
        this.rightsList = res.data
      }).catch(err => {
        this.$message.error(err || '错误')
      }).finally(() => {
        this.getLoading = false
      })
    }

  },

  props: []
}
</script>
<style lang='less' scoped>
.el-table {
  margin-top: 0;
}
</style>
